<template>
  <div id="app">
    <div :class="isShow ? $style.content: ''">
      <router-view></router-view>
    </div>
    <tabbar style="position:fixed;z-index:10;" v-if="isShow">
      <tabbar-item :link="{path: '/'}">
        <span slot="icon">
          <i :class="index === 0 ? [$style.icon, 'iconfont','icon-CombinedShape',$style.active]:[$style.icon, 'iconfont','icon-CombinedShape']"></i>
        </span>
        <span slot="label" :class="index ===0 ? $style.active: ''">首页</span>
      </tabbar-item>
      <tabbar-item :link="{path: '/order'}">
        <span slot="icon">
          <i :class="index === 1 ? [$style.icon, 'iconfont','icon-dingdan',$style.active]:[$style.icon, 'iconfont','icon-dingdan']"></i>
        </span> 
        <span slot="label" :class="index ===1 ? $style.active: ''">订单</span>
      </tabbar-item>
      <tabbar-item :link="{path: '/my'}">
        <span slot="icon">
          <i :class="index === 2 ? [$style.icon, 'iconfont','icon-wode',$style.active]:[$style.icon, 'iconfont','icon-wode']"></i>
        </span>   
        <span slot="label" :class="index ===2 ? $style.active: ''">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
import http from './APIService/http'
export default {
  name: 'app',
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      index: 0,
      isShow: false
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/') {
        this.index = 0
        this.isShow = true
      } else if (to.path === '/order') {
        this.index = 1
        this.isShow = true
      } else if (to.path === '/my') {
        this.index = 2
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  },
  mounted () {
    let token = this.$Cookie.getToken() || ''
    if (this.isAndroid() && this.$isWx) {
      this.adjustFont()
    }
    if (token) {
      this.getUserInfo()
    }
  },
  methods: {
    isAndroid () {
      let u = navigator.userAgent
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // 这个判断 是不是ios手机
      return !isiOS
    },
    adjustFont () {
      if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
        this.handleFontSize()
      } else {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.handleFontSize, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.handleFontSize)
          document.attachEvent('onWeixinJSBridgeReady', this.handleFontSize)
        }
      }
    },
    handleFontSize () {
      // 设置网页字体为默认大小
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
        // 重写设置网页字体大小的事件
      WeixinJSBridge.on('menu:setfont', function () {
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
      })
    },
    async getUserInfo () {
      let res = await http.get(`/users/getUserInfo`)
      if (res.code === 0) {
        this.$store.commit('SET_USER', res.data)
      }
    }
  }
}
</script>

<style lang="less" module>
  .content {
    padding-bottom: 50px;
  }
  .icon {
    display: inline-block;
    font-size:20px;
  }
  .active {
    color:#e36049;
  }
</style>
<style lang="less">
@import '~vux/src/styles/reset.less';
body {
  background-color: #fff;
  -webkit-text-size-adjust:100%!important;
  #app {
    min-height: 100vh;
  }
}
.weui-dialog__btn_primary {
  color:#e36049;
}
.weui-btn_default:not(.weui-btn_disabled):active {
    color: #fff!important;
    background-color: #e36049!important;
}
.vux-popup-header-right {
  color:#e36049!important;
}
</style>